<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>省份交易量环比监控</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/monitor.css">
    <script src="https://cdn.jsdelivr.net/npm/jquery@3.7.0/dist/jquery.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/echarts@5.4.3/dist/echarts.min.js"></script>
</head>
<body class="monitor-body">
    <!-- 顶部导航 -->
    <nav class="navbar navbar-expand-lg navbar-dark monitor-navbar">
        <div class="container-fluid">
            <div class="navbar-brand">
                <span class="title-icon">📊</span>
                <span>省份交易量环比监控</span>
            </div>
            <div class="navbar-text">
                <a href="index.html" class="btn btn-outline-light btn-sm me-2">返回首页</a>
                <a href="transaction-monitor.html" class="btn btn-outline-light btn-sm me-2">实时监控</a>
                <a href="history-monitor.html" class="btn btn-outline-light btn-sm me-2">历史监控</a>
                <span id="currentTime" class="time-display">--</span>
            </div>
        </div>
    </nav>

    <!-- 主要监控区域 -->
    <div class="container-fluid monitor-container">
        <!-- 省份交易量环比监控 -->
        <div class="row">
            <div class="col-12">
                <div class="monitor-panel">
                    <div class="panel-header">
                        <h3 class="panel-title">
                            <span class="title-icon">📊</span>
                            省份交易量环比分析
                        </h3>
                        <div class="panel-controls">
                            <div class="control-group">
                                <label class="control-label">基准日期时间</label>
                                <input type="datetime-local" id="provinceBaseTime" class="form-control form-control-sm" value="2025-09-07T21:30">
                            </div>
                            <div class="control-group">
                                <label class="control-label">时间范围</label>
                                <select id="provinceTimeRange" class="form-select form-select-sm">
                                    <option value="30">30分钟</option>
                                    <option value="60" selected>1小时</option>
                                    <option value="120">2小时</option>
                                    <option value="360">6小时</option>
                                    <option value="1440">1天</option>
                                </select>
                            </div>
                            <div class="control-group">
                                <label class="control-label">对比天数</label>
                                <select id="provinceCompareDays" class="form-select form-select-sm">
                                    <option value="3">对比3天</option>
                                    <option value="7" selected>对比7天</option>
                                    <option value="14">对比14天</option>
                                    <option value="30">对比30天</option>
                                </select>
                            </div>
                            <div class="control-group">
                                <label class="control-label">省份选择 (最多5个)</label>
                                <div class="province-selector">
                                    <button type="button" class="btn btn-sm province-select-btn" 
                                            data-bs-toggle="modal" data-bs-target="#provinceModal">
                                        <span id="selectedProvinceCount">0</span> 个省份已选择
                                    </button>
                                    <div class="selected-provinces" id="selectedProvincesList"></div>
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label">中心</label>
                                <select id="provinceCenterSelect" class="form-select form-select-sm">
                                    <option value="">全部中心</option>
                                    <option value="hf">合肥中心</option>
                                    <option value="yz">亦庄中心</option>
                                    <option value="lf">廊坊中心</option>
                                </select>
                            </div>
                        </div>
                    </div>
                    <div class="panel-body">
                        <div id="provinceChart" class="chart-container"></div>
                        
                        <!-- 数据说明 -->
                        <div class="chart-legend mt-3">
                            <div class="legend-item">
                                <div class="legend-color" style="background: #4FC3F7;"></div>
                                <span>横坐标为日期，每个省份用不同颜色显示</span>
                            </div>
                            <div class="legend-item">
                                <div class="legend-color" style="background: #81C784;"></div>
                                <span>时间范围：指定时间段内的交易量统计</span>
                            </div>
                            <div class="legend-item">
                                <div class="legend-color" style="background: #F44336;"></div>
                                <span>对比天数：连续N天的趋势对比</span>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- 状态指示器 -->
    <div id="statusIndicator" class="status-indicator">
        <div class="status-dot"></div>
        <span class="status-text">连接正常</span>
    </div>

    <!-- 加载中遮罩 -->
    <div id="loadingOverlay" class="loading-overlay">
        <div class="spinner-border text-primary" role="status">
            <span class="visually-hidden">加载中...</span>
        </div>
        <div class="loading-text">正在加载省份对比数据...</div>
    </div>

    <!-- 省份选择模态框 -->
    <div class="modal fade" id="provinceModal" tabindex="-1" aria-labelledby="provinceModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-lg">
            <div class="modal-content province-modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="provinceModalLabel">选择省份 (最多5个)</h5>
                    <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                </div>
                <div class="modal-body">
                    <div class="province-search mb-3">
                        <input type="text" class="form-control" id="provinceSearch" placeholder="搜索省份...">
                    </div>
                    <div class="province-grid" id="provinceGrid">
                        <!-- 省份选择网格将通过JavaScript动态生成 -->
                    </div>
                    <div class="selected-summary mt-3">
                        <strong>已选择：</strong>
                        <span id="modalSelectedList">无</span>
                        <span class="float-right">
                            <span id="modalSelectedCount">0</span>/5
                        </span>
                    </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">取消</button>
                    <button type="button" class="btn btn-primary" id="confirmProvinceSelection">确认选择</button>
                </div>
            </div>
        </div>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <script src="js/utils.js"></script>
    <script src="js/charts.js"></script>
    <script src="js/province-monitor.js"></script>
</body>
</html>